<template>
  <div class='goods-page' v-if="goods">
    <div class="container">
      <!-- 面包屑 -->
      <XtxBread>
        <XtxBreadItem to="/">首页</XtxBreadItem>
        <XtxBreadItem to="/">手机</XtxBreadItem>
        <XtxBreadItem to="/"></XtxBreadItem>
        <XtxBreadItem >xx</XtxBreadItem>
      </XtxBread>
      <!-- 商品信息 -->
      <div class="goods-info">
          <div class="media">
              <GoodsImage :images="goods.mainPictures"/>
              <GoodsSale />
          </div>
          <div class="spec">
              <GoodsName :goods="goods"/>
              <GoodsSku :goods="goods" skuId="3634999" @change="changeSku"/>
              <XtxNumbox v-model="num"/>
              <XtxButton type="primary" style="margin-top:20px" @click="addCart">加入购物车</XtxButton>
          </div>
      </div>
      <!-- 商品推荐 -->
      <GoodsRelevant :goodsId="goods.id"/>
      <!-- 商品详情 -->
      <div class="goods-footer">
        <div class="goods-article">
          <!-- 商品+评价 -->
          <GoodsTabs />
          <!-- 注意事项 -->
          <GoodsWarm />
        </div>
        <!-- 24热榜+专题推荐 -->
        <div class="goods-aside">
            <GoodsHot :type="1"/>
            <GoodsHot :type="2"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import GoodsRelevant from './components/GoodsRelevant.vue'
import GoodsImage from './components/GoodsImage.vue'
import GoodsSale from './components/GoodsSale.vue'
import GoodsName from './components/GoodsName.vue'
import GoodsSku from './components/GoodsSku.vue'
import GoodsHot from './components/GoodsHot.vue'
import GoodsTabs from './components/GoodsTabs.vue'
import GoodsWarm from './components/GoodsWarm.vue'
import {findGoods} from '@/api/product'
import {watch,ref, nextTick,provide} from 'vue'
import {useStore} from 'vuex'
import {useRoute} from 'vue-router'
import Message from '@/components/library/Message'

export default {
    name:'GoodsPage',
    components:{GoodsRelevant,GoodsImage,GoodsSale,GoodsName,GoodsSku,GoodsHot,GoodsTabs,GoodsWarm},
    setup(){
        const goods =useGoods()
        const changeSku=(sku)=>{
            console.log('sku',sku);
            if(sku.skuId){
                goods.value.price=sku.price
                goods.value.oldPrice=sku.oldPrice
                goods.value.inventory=sku.inventory
                curSku.value=sku
            }else{
                curSku.value=null
            }
            
        }

        // 数量
        const num = ref(1)

        provide('goods',goods)

        // 加入购物车
        //id skuId name picture price nowPrice count attrsText selected stock isEffective
        const curSku=ref(null)
        const state=useStore()
        // const {id,name,price,mainPictures } =goods.value
        // const {specsText:attrsText,inventory:stock}=curSku.value
        const addCart=()=>{
            if(curSku.value && curSku.value.skuId){
                state.dispatch('cart/insertCart',{
                    skuId:curSku.value.skuId,
                    attrsText:curSku.value.specsText,
                    stock:curSku.value.inventory,
                    id:goods.value.id,
                    name:goods.value.name,
                    price:goods.value.price,
                    nowPrice: goods.value.price,
                    picture: goods.value.mainPictures[0],
                    selected: true,
                    isEffective: true,
                    count: num.value
                }).then(()=>{
                      Message({ type: 'success', text: '加入购物车成功' })
                })
            }else{
                  Message({ text: '请选择完整规格' })
            }
        }
   

        return {goods,changeSku,num,addCart}
    }
}
const useGoods=()=>{
    const goods=ref([])
    const route=useRoute()
    watch(()=>route.params.id,(newVal)=>{
        if(newVal && `/product/${newVal}` === route.path){
            findGoods(route.params.id).then(data=>{
                    //  console.log('res',data.result);
                 // 让商品数据为null让后使用v-if的组件可以重新销毁和创建
                goods.value=null
                nextTick(()=>{
                    goods.value=data.result
                })
            })
        }
    },{immediate:true})

    return goods
}
</script>

<style lang='less' scoped>
.goods-page{
    .goods-info{
        min-width: 600px;
        background-color: #fff;
        display: flex;
        .media{
            padding: 30px 50px;
            width: 580px;
            height: 600px;
        }
        .spec{
            flex: 1;
            padding: 30px 30px 30px 0px;
        }
    }
    .goods-footer{
        margin-top: 20px;
        display: flex;
        .goods-article{
            background-color: #fff;
            width: 940px;
            min-height: 1000px;
            margin-right: 20px;
        
        }
        .goods-aside{
            width: 280px;
            min-height: 1000px;
        }
    }
}
</style>